<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>第一种收集方式</title>
		<!-- 引入react核心库 -->
		<script type="text/javascript" src="../js/react.js"></script>
		<!-- 引入react-dom，用于支持react操作DOM -->
		<script type="text/javascript" src="../js/react-dom.js"></script>
		<!-- 引入babel，用于解析jsx为js -->
		<script type="text/javascript" src="../js/babel.min.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器 -->
		<div id="root"></div>

		<script type="text/babel">
			//何为非受控：所有输入类的元素都是“现用现节点.value”
			//定义组件
			class Login extends React.Component{
				//准备好一个容器
				password = React.createRef()
				render(){
					return (
						<form onSubmit={this.handlerSubmit}>
							用户名：<input ref={c => this.username = c} type="text"/>
							密码：<input ref={this.password} type="password"/>
							<button>登录</button>
						</form>
					)
				}
				handlerSubmit = (event)=>{
					event.preventDefault()//阻止表单提交
					const username = this.username.value
					const password = this.password.current.value
					alert(`用户名：${username},密码：${password}`)
					// return false //react中不能够使用这种方式阻止默认事件
				}
			}
			//渲染组件
			ReactDOM.render(<Login/>,document.getElementById('root'))
		</script>
	</body>
</html>